package myJs.cps.project

import myJs.api.Api
import myJs.cps.Style
import myJs.myPkg.layer
import myJs.tool.Tool
import org.scalajs.dom.html
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.core.facade.React
import slinky.web.html._
import myJs.Implicits._
import myJs.myPkg.reactBootstrap.Modal
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import shared.pojo.Sample.SampleInfo
import typings.csstype.csstypeStrings

/**
 * Created by yz on 21/1/2022
 */
@react object QrcodeModalCp {

  case class Props(show: Boolean = false, showChange: Boolean => Unit, sampleId: String)

  val component = FunctionalComponent[Props] { props =>

    object FTool {

      def handleClose = () => {
        props.showChange(false)
      }

    }

    Modal(onHide = FTool.handleClose, show = props.show, size  = "qrcodeModal")(
      Modal.Header(bsPrefix = "modal-header bg-primary", closeButton = true)(
        Modal.Title(
          span(style := Style(fontWeight = "bold"), id := "lblAddTitle", s" 二维码信息")
        )
      ),
      Modal.Body(
        div(style := Style(display = csstypeStrings.flex, justifyContent = csstypeStrings.center),
          QrcodeCp(sampleId = props.sampleId)
        ),
        div(style := Style(width = "1px", height = "1px", overflow = "hidden",
          position = csstypeStrings.relative,
          backgroundColor = "#fff"),
          div(style := Style(position = csstypeStrings.absolute, right = "300px"),
            ul(id := "prepare_print_block")
          )
        )
      ),
      Modal.Footer(bsPrefix = "modal-footer bg-info")(
        button(`type` := "button", className := "btn green", data - "dismiss" := "modal", "取消",
          onClick := FTool.handleClose),
      )

    )

  }


}
